<template>
  <view
    :class="[
    'd-forms-item flex flex-row',
    {['is-disabled']: realDisabled},
  ]"
  >
    <view v-if="label" class="dfi-label-box flex-shrink-0" :style="{width: labelWidth || parentLabelWidth()}">
      <text class="dfi-label">{{ label }}：</text>
    </view>
    <view v-if="!$slots.default" class="dfi-value-box flex-grow-1">
      <text class="dfi-content">{{ showStr || '暂无' }}</text>
    </view>
    <view v-else class="dfi-value-box flex-grow-1">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
defineOptions({name: 'DFormsItem'});
import {formatDate2, formatRMB, formatStr} from "@/utils";
import {getDictDataLabel} from "@/utils/pmDict";
import { DFormInputType } from "@/utils/enum";

const parentLabelWidth = inject('labelWidth') as () => {};
const parentDisabled = inject('disabled') as () => {};

const $slots = useSlots();

const realDisabled = computed(() => {
  if (props.disabled !== null) {
    return props.disabled
  }
  return parentDisabled()
})

const props = defineProps({
  label: {
    type: String,
    default: null,
  },
  labelWidth: {
    type: String,
    default: null,
  },
  showLabel: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean || null,
    default: null,
  },
  input: {
    type: [String, Number, null, undefined],
    default: null,
  },
  type: {
    type: String,
    default: 'string',
  },
  suffix: {
    type: String,
    default: null
  },
  dictType: {
    type: String,
    default: null,
  },
  format: {
    type: String,
    default: 'yyyy-MM-dd hh:mm:ss'
  }
})

const showStr = computed(() => {
  if (props.input === 0 || (props.input && props.input.toString().length > 0)) {
    if (props.type === DFormInputType.STR) {
      return formatStr(props.input, props.suffix)
    } else if (props.type === DFormInputType.AMOUNT) {
      return formatRMB(props.input)
    } else if (props.type === DFormInputType.DATE) {
      return formatDate2(props.input, props.format)
    } else if (props.type === DFormInputType.DICT) {
      return getDictDataLabel(props.dictType, props.input)
    }
  }
  return '暂无';
})

</script>

<style scoped lang="scss">
.d-forms-item.is-disabled {
  padding: 10rpx 0;
  border-bottom: 1px solid transparent;

  .dfi-label-box {
    .dfi-label {
      color: #999;
    }
  }
}

.d-forms-item {
  padding: 30rpx 0 26rpx 0;
  border-bottom: 1px solid #E8E8E8;

  .dfi-content {
    text-transform: none;
  }

  .dfi-label-box {
    //margin-right: 20rpx;

    .dfi-label {
      display: block;
      //text-align: right;
      font-size: 32rpx;
      font-weight: normal;
      text-transform: lowercase;
      letter-spacing: 0;
      line-height: 56rpx;

      color: #333333;
    }
  }

  .dfi-value-box {
    font-size: 32rpx;
    font-weight: normal;
    line-height: 56rpx;
    letter-spacing: 0em;
    white-space: pre-wrap;
    word-break: break-all;
    color: #333333;
  }
}
</style>
